<{extend name="base" /}>
    <{block name="body" }>
        <div class="layui-body ">
            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title">
                    <li class="">
                            <a href="<{:url('admin/sogou/index')}>">已添加列表</a>
                        </li>
                        <li class="layui-this">
                            <a href="<{:url('admin/sogou/create',['style_id'=>1])}>">样式一</a>
                        </li>
                        <li >
                            <a href="<{:url('admin/sogou/create',['style_id'=>2])}>">样式二</a>
                        </li>
                        <li >
                            <a href="<{:url('admin/sogou/create',['style_id'=>3])}>">样式三</a>
                        </li>
                        <li>
                            <a href="<{:url('admin/sogou/create',['style_id'=>4])}>">样式四</a>
                        </li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show" id="app">
                        <div class="left">
                            <form class="layui-form" method="post" action="<{:url('admin/sogou/save')}>">
                                <input type="hidden" name="style" value="1">
                                <{php}>
                                if(request()->action() == 'edit'){
                                    echo '<input type="hidden" name="type" value="edit">';
                                    echo '<input type="hidden" name="id" value="'.request()->get('id').'">';
                                }
                                <{/php}>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">标题</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="content[title]" id="title" lay-verify="required" v-model='Btitle' placeholder="{用此符号可飘红，支持多个} 必须成对书写"
                                            class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">缩略图</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="content[thumb]" lay-verify="required" v-model='Bsrc' class="layui-input layui-input-inline" id="mythumb">
                                        <input type="file" name="file" class="layui-upload-file">
                                    </div>
                                </div>
                                <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">描述</label>
                                    <div class="layui-input-block">
                                        <textarea name="content[desc]" lay-verify="required" required placeholder="{用此符号可飘红，支持多个} 必须成对书写"
                                            class="layui-textarea" v-model='Bcontent'></textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">链接</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="content[url]" v-model='Burl' required lay-verify="required|url" placeholder="例如：http://baidu.com" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">电话</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="content[tel]" v-model='Btel' lay-verify="required" placeholder="例如：010-8888888" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-row">
                                    <div class="layui-col-md4">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">小标题一</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="content[data][stitle1]" v-model='Bstitle1' lay-verify="required" placeholder="医院简介" class="layui-input stitle-input">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md8">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">链接</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="content[data][surl1]" v-model='Bsurl1' lay-verify="required|url" placeholder="请输入链接" class="layui-input stitle-input">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-row">
                                    <div class="layui-col-md4">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">小标题二</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="content[data][stitle2]" v-model='Bstitle2' required lay-verify="required" placeholder="特色服务" class="layui-input stitle-input">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md8">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">链接</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="content[data][surl2]" v-model='Bsurl2' lay-verify="required|url" placeholder="请输入链接" class="layui-input stitle-input">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-row">
                                    <div class="layui-col-md4">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">小标题三</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="content[data][stitle3]" v-model='Bstitle3' required lay-verify="required" placeholder="优惠政策" class="layui-input stitle-input">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md8">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">链接</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="content[data][surl3]" v-model='Bsurl3' lay-verify="required|url" placeholder="请输入链接" class="layui-input stitle-input">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="right" id="sogou-search">
                            <link rel="stylesheet" href="/sogou/css/style.css" />
                            <div class="vrResult">
                                <h3 class="vr-tit">
                                    <a class="resultLink" :href="Burl" v-html="Ctitle"></a>
                                </h3>
                                <div class="vr-wiki171115">
                                    <a class="img-flex" :href="Burl">
                                        <div class="img-layout">
                                            <img :src='Bsrc' width="80" height="80">
                                        </div>
                                        <div class="text-layout">
                                            <p class="clamp4" v-html="Ccontent"></p>
                                        </div>
                                    </a>
                                    <div class="link-base link-type1">
                                        <a :href="Bsurl1" v-text='Bstitle1'></a>
                                        <a :href="Bsurl2" v-text='Bstitle2'></a>
                                        <a :href="Bsurl3" v-text='Bstitle3'></a>
                                    </div>
                                </div>
                            </div>
                            <div class="vr-recommend">
                                <a :href="Ctel" class="recommend-wrap align-mid">
                                    <div class="img-layout">
                                        <img :src="Bsrc">
                                    </div>
                                    <div class="spread-txt clamp2">点击拨打电话，一键咨询更方便！</div>
                                    <div class="btn-import2">立即拨打</div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
<{/block}>
<{block name="script" }>
                <style type="text/css">
                    .left,
                    .right {
                        float: left;
                    }

                    .left {
                        width: 60%;
                    }

                    .right {
                        height: 550px;
                        margin-left: 60px;
                        width: 300px;
                        border: 2px solid #ccc;
                        border-radius: 20px;
                        padding: 20px;
                        background: #f1f1f1;
                        box-shadow: 1px 2px #eeeeee5c;
                    }
                </style>
                <script src="/static/js/vue.js"></script>
                <script type="text/javascript">
                    var vue = new Vue({
                        el: "#app",
                        data: {
                            Btitle: '',
                            Bcontent: '',
                            Btel: '',
                            Burl:'',
                            Bstitle1: '医院简介',
                            Bstitle2: '特色服务',
                            Bstitle3: '来院路线',
                            Bsurl1: '',
                            Bsurl2: '',
                            Bsurl3: '',
                            Bsrc: 'http://iph.href.lu/80x80'
                        },
                        computed: {
                            Ctitle: function () {
                                if (this.Btitle == '') {
                                    return '百度<em>中国有限公司</em>';
                                }
                                return this.Btitle.replace(/{/g, '<em>').replace(/}/g, '</em>');
                            },
                            Ccontent: function () {
                                if (this.Bcontent == '') {
                                    return '百度<em>中国有限公司</em>百度<em>中国有限公司</em>百度<em>中国有限公司</em>百度<em>中国有限公司</em>...';
                                }
                                return this.Bcontent.replace(/{/g, '<em>').replace(/}/g, '</em>');
                            },
                            Ctel: function () {
                                return 'tel:' + this.Btel;
                            }

                        }
                    });

                    <{php}>
                        if(request()->action() == 'edit'){

                            echo "vue.Btitle = '".$data['content']['title']."';";
                            echo "vue.Bcontent = '".$data['content']['desc']."';";
                            echo "vue.Btel = '".$data['content']['tel']."';";
                            echo "vue.Burl = '".$data['content']['url']."';";
                            echo "vue.Bsrc = '".$data['content']['thumb']."';";

                            echo "vue.Bstitle1 = '".$data['content']['data']['stitle1']."';";
                            echo "vue.Bstitle2 = '".$data['content']['data']['stitle2']."';";
                            echo "vue.Bstitle3 = '".$data['content']['data']['stitle3']."';";
                            echo "vue.Bsurl1 = '".$data['content']['data']['surl1']."';";
                            echo "vue.Bsurl2 = '".$data['content']['data']['surl2']."';";
                            echo "vue.Bsurl3 = '".$data['content']['data']['surl3']."';";
                            
                        }
                    <{/php}>


                    $(function () {
                        layui.upload({
                            url: "/api/upload/upload",
                            type: 'image',
                            ext: 'jpg|png|gif|bmp',
                            success: function (data) {
                                if (data.error === 0) {
                                    document.getElementById('mythumb').value = data.url;
                                    vue.Bsrc = data.url; //映射到vue
                                    $(".c-img>img").attr('src', data.url);
                                } else {
                                    layer.msg(data.message);
                                }
                            }
                        });
                    });
                </script>
                <{/block}>